<div style="width:525px; height:550px; margin-left:30px; background-color:#fff;">
  <div id="pages" style="width:485px; padding:15px 20px 20px;">
    <form id="form-password" action="<?php e($this->base); ?>/members/password" method="post" class="infotxt" onsubmit="return save()">
      <table border="0" cellpadding="2" cellspacing="3" width="100%" style="margin-top:100px;">
        <tbody>
          <tr>
            <td align="right" class="infotxt"><span class="style16">*</span>&nbsp;<?php __('Old Password'); ?> :</td>
            <td><input type="password" id="old_password" name="old_password" class="input req" /></td>
          </tr>
          <tr>
            <td align="right" class="infotxt"><span class="style16">*</span>&nbsp;<?php __('New Password'); ?> :</td>
            <td><input type="password" id="password01" name="password" class="input req" /></td>
          </tr>
          <tr>
            <td align="right" class="infotxt"><span class="style16">*</span>&nbsp;<?php __('Confirm New Password'); ?> :</td>
            <td><input type="password" id="confirm_password" name="confirm_password" class="input req" /></td>
          </tr>
        </tbody>
      </table>
      <div class="center">
        <input type="submit" value="<?php __('Change'); ?>" />
      </div>
  </form>
  </div>
</div>

<script type="text/javascript">
function save () {
    var proceed = true;
    var transId = '';
    var focuson = '';
    var message = Ext.get('message');

    message.setStyle({ display:'none' });
    Ext.select('.invalid', false, 'form-password').removeClass('invalid');
    Ext.select('div.invalidField', false, 'form-password').remove();
    Ext.select('td.invalidText', false, 'form-password').removeClass('invalidText');
    Ext.each(Ext.select('.req', false, 'form-password').elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('td').prev('td').addClass('invalidText');
            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    if (!proceed) {
        return false;
    }
    var cp = Ext.get('confirm_password');
    if (cp.getValue() && Ext.fly('password01').getValue()) {
        if (cp.getValue() != Ext.fly('password01').getValue()) {
            message.addClass('error').highlight().update('Password not matched!');
            cp.addClass('invalid');
            cp.up('td').prev('td').addClass('invalidText');
            cp.fadeIn({
                duration: 2.0
            });
            cp.focus();
            return false;
        }
    }

    transId = Ext.Ajax.request({
        form: 'form-password',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (obj.status == false) {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.addClass('error').highlight();
                }
                if (Ext.isArray(obj.error)) {
                    Ext.each(obj.error, function(e) {
                        var el  = Ext.get(e.id);
                        var err = '<div class="invalidField" style="display:none;">'+e.code+'</div>';
                        el.addClass('invalid');
                        el.up('td').prev('td').addClass('invalidText');
                        el.insertHtml('afterEnd', err);
                        el.next('div.invalidField').slideIn('t', {
                            duration:.4
                        });
                        if (!focuson) {
                            focuson = e.id;
                            el.focus();
                            el.fadeIn({
                                duration: 2.0
                            });
                        }
                    });
                }
            } else {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.removeClass('error').addClass('success').highlight();
                    message.pause(8).fadeOut({ useDisplay:true });
                    cp.dom.value = '';
                    Ext.fly('old_password').dom.value = '';
                    Ext.fly('password01').dom.value   = '';
                }
            }
        },
        failure: function(response, opts) {
            console.log('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=button]', 'form-password'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=button]', 'form-password'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Saving..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }

    return false;
} // save
</script>